<template>
	<view class="content">
			 <view class="top-box">
			    <view class="welcome">
			      <navigator  url="/pages/index/index" class="welcome-out">×</navigator>
			      <navigator class="welcome-register" url="/pages/index/index" hover-class="navigator-hover">注册</navigator>
			    </view>
			    <view class="welcome-two">
			      <view class="top-signin">{{signin}}</view>
			      <view class="top-welcome">{{welcome}}</view>
			    </view>
			  </view>
		  <view class="lower">
		    <view class="picture">
		      <image src="../image/go.png"></image>
		    </view>
		    <view class="lower-box">
		      <view class="login">手机登录</view>    
		          <view class="link">                  <!--判断手机号-->
		                <input class="inputText"placeholder="请输入手机号" type="text"   @input="titleinput"/>
		          </view>
				    <view class=" link " style="display: flex;">         <!--判断验证码-->
				            <input  placeholder="请输入验证码"  />
				            <view><button type="primary"   class="letter" style=" margin-left: -50rpx; background-color: #3F76EE; margin-top: -40rpx;"  bindtap="send">短信验证码</button></view> 
				     </view>
					 <button class="sign" style="width: 400rpx;" formType="submit"   @click="getPhones">立即登录</button>
		      <view class="group">
		        <image bindtap="onWXClick" style="width: 120rpx; height: 100rpx;margin-top: 20rpx; " src="../image/group.png"></image>
		      </view>
		    </view>
		  </view>	  
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				    signin: '登录',
				    welcome: '欢迎来到公共服务',
			}
		},
		methods:{
			titleinput({detail:{value}}){
			   var phone=value
				  console.log(phone)
			  },
		},
		
		
	}
</script>

<style>
	*{
		
	}
	.content {
		background-color: #3F76EE;
	}
	.welcome { 
	  display: flex;
	  justify-content: space-between;
	  padding-top: 60rpx;
	}
	.welcome-two{
	  margin-top: 35rpx;
	}
	.top-box{
	  color: aliceblue;
	  widows: 100vw;
	  height: 400rpx;
	  padding-left: 50rpx;
	}
	.top-signin{
	    font-size: 45rpx;
	}
	.top-welcome{
	  font-size: 30rpx;
	  margin-top: 15rpx;
	  font-weight: bold;
	}
	.welcome-out{
	  font-size: 50rpx;
	}
	.welcome-register{
	  margin-right: 50rpx;
	}
	.picture image{
	  margin-left: 100rpx;
	  margin-top: -80rpx;
	  width: 600rpx;
	  height: 450rpx;
	}
	.lower{
	  margin-top: -30rpx;
	  width: 100vw;
	  border-radius: 60rpx 60rpx 0rpx 0rpx;
	  background-color: #FFFFFF;
	}
	.input {
	  font-size: 25rpx;
	}
	.lower-box view{
	  margin-left: 80rpx;
	  padding-top: 40rpx;
	}
	.obtain{
	  position: absolute;
	  left: 100rpx;
	  /* border: 1px solid #3F76EE; */
	  border-radius: 60px;
	  width: 200rpx;
	  height: 10rpx;
	  position: relative;
	  /* color: #3F76EE; */
	}
	.code{
	 position: absolute;
	 top: 10rpx;
	 left: 40rpx;
	 font-size: 25rpx;
	}
	.login{
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #3F76EE;
	}
	.group{
	  position: absolute;
	  left: 230rpx;
	}
	.sign{
	  border: 1px solid #ccc;
	  border-radius: 60px;
	  margin-top: 30rpx;
	  font-size: 30rpx;
	  color: #f7f7f8;
	  background-color: #3F76EE;
	}
	.link{
		border-bottom: 1rpx solid #ccc;
		width: 80%;
	}
	.letter {
	    margin-top: -5rpx;
	    margin-left: 150rpx;
	    font-size: 25rpx;
	    width: 200rpx;
	    height: 50rpx;
	    text-align: center;
	    line-height: 50rpx;
	  }	  
</style>
